


Hermione's Guide to Adding an Image to Ao3

by hermiones_nook



Series: Hermione's Guide to Ao3 [3]
Category: No Fandom
Genre: Tutoring, how to, tutorial
Language: English
Status: Completed
Published: 2019-08-25
Updated: 2019-08-25
Packaged: 2020-09-23 10:24:38
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 614
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/20338600
Author URL: https://archiveofourown.org/users/hermiones_nook/pseuds/hermiones_nook
Summary: Ever wondered how to put an image into your fic or work? Here's how!





	Hermione's Guide to Adding an Image to Ao3

Adding an image to Ao3 can be a perplexing thing the first time around. However! We have developed this handy guide that will take you through it easily, step by step. 

The first thing you need to understand though is this. Ao3 does not host images. What this means is that you cannot copy/paste an image from your phone/computer and expect it to show up. 

What Ao3 does instead is; reflect images from other websites. It uses the source code embedded in the picture to copy the picture and show it. Rather like a loan of the image. 

What does this mean for you? It means you need to find another webpage to host your pictures on first, then you use the source code for Ao3 to mirror it. 

Good sites to use: Tumblr. Flickr. Imgur. Websites you own/have full control.

Bad sites to use: Facebook (it works for a while until Facebook changes the codes causing the link to break and not show the picture at all)

As a general rule, you_ can _ pull image source code from anywhere, but it is advisable that you place a copy of the photo/image etc to a website you control as they can be taken/moved/changed at any time. 

(If using a site not your own, please either abide by their policies or make a private account that cannot be seen so that your pics can't be flagged as inappropriate, which would cause them to be removed hence breaking your link.) 

Now! How to get the image source code? Right-click and select "copy image source code" or “copy image address” you'll get something that looks a little similar to something like this: 

https://scontent.fbne6-1.fna.fbcdn.net/v/t1.0-9/60303975_463205981116636_4389813226301292544_n.jpg?_nc_cat=106&_nc_oc=AQn6f3X8Aq5EOS87SDRLcssSgmdS2S2VIH0djFFyqIoPIU9H2rIzy34XJRnAA5-ym6Y&_nc_ht=scontent.fbne6-1.fna&oh=303c65778e357f1ec41e08595b9c5f82&oe=5E144A4B

Next! Go to your Ao3 works page. Either post a new fic or hit the edit button on an existing fic or chapter. 

Make sure you have 'Rich text' enabled. 

Next, place your cursor where you want the pic to be placed. (I don't mean the arrow, I mean the flashing line) if you need to use your adjustment tools to centre/left/right align do so now. Because it's harder to do this in reverse. 

Next step! You'll see a little button with a picture of a mountain on it in the buttons along the top left of the text box. Click it. 

You'll get a nice little box pop up. Start filling it in. Paste your source code in "Source".

"Image Description" - this is where you put a description of what the picture is. In the case of link breakage. It could be as simple as "Draco Malfoy" or as much as "Draco Malfoy sucking on a red lollipop wearing candy-covered rainbow shorts at a Pride Parade" it's up to you. You can even leave it blank if you like.

(Note: some apps for the visually impaired are capable of reading these descriptions so the kind thing to do is fill them in)

Dimensions - now, this will automatically fill in with the sizes from the source code. But you can change it however you like. 

Why would you do this? Well, the original image might be HUGE!! And extend your fic width in ways that would make it terribly unfunctional to use. 

You might also want to make them phone friendly. 

In which case a width size of between 400-500 is advisable. 

Hot tip: stick with one width OR height size within the same fic to make things uniform. 

And always, ALWAYS, use the preview button before posting. 

  


Your loving team at Hermione's Nook


End file.
